<template>
	<view>
		<view class="memberlist" :class="[indexv==0&&'memberlist_extra']" v-for="(itemv,indexv) in ticketGroupList" :key="indexv">
			<text v-if="isBuy" class="memberlist-title">{{itemv.title}}</text>
			<view v-else class="memberbuy-title">
				<view class="memberbuy-title-top">
					<text class="mtt-left">{{itemv.title}}</text>
					<text class="mtt-right">-{{itemv.price}}元</text>
				</view>
				<text class="memberbuy-title-time">{{itemv.create_time_format}}</text>
			</view>
			<view class="voucher_list" :style="{marginTop:!isBuy&&'20rpx'}" v-for="(item,index) in itemv.lists" :key="index">
				<view class="voucher_list_item" :style="{marginTop:!isBuy&&'0rpx'}">
					<view class="voucher_list_item_top">
						<view class="voucher_list_item_top_left">
							<view class="voucher_list_item_top_left_money">
								<text class="voucher_list_item_top_left_money_sign">￥</text>
								<text class="voucher_list_item_top_left_money_amount">{{Number(item.money)}}</text>
							</view>
							<text class="voucher_list_item_top_left_fullmoney">满{{item.limit}}元</text>
						</view>
						<view class="voucher_list_item_top_right">
							<view class="voucher_list_item_top_right_information">
								<view class="voucher_list_item_top_right_information_effect">
									<text class="voucher_list_item_top_right_information_effect_left">共{{item.num}}张</text>
								</view>
								<text class="voucher_list_item_top_right_information_time">有效期至 {{isBuy?item.expire_format:item.expire}}</text>
							</view>
							<view class="voucher_list_item_top_right_status" v-if="isBuy">
								<text @click="goHome" class="voucher_list_item_top_right_status_text">立即使用</text>
							</view>
						</view>
					</view>
					<view class="voucher_list_item_bottom">
						<view class="voucher_list_item_bottom_condition">
							<text class="voucher_list_item_bottom_condition_text" :class="[item.isImage&&'voucher_list_item_bottom_condition_extext']">
								{{item.rule}}
							</text>
						</view>
						<view @click="switchover(ticketGroupList,itemv.lists,item)">
							<view class="voucher_list_item_bottom_imageview">
								<image class="voucher_list_item_bottom_image" :class="[item.isImage&&'voucher_list_item_bottom_eximage']" src="@/static/my/pulldown.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="isBuy" class="voucher_center_buycc">
				<view @click="buyNow(itemv)" class="voucher_center_btn">¥{{itemv.price}} 立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'Ticket',
		props:{
			ticketGroupList:{
				type:Array,
				default:()=>[]
			},
			isBuy:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 跳转到首页
			goHome(){
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			// 立即购买
			buyNow(itemv){
				this.$emit('buyNow',{data:itemv})
			},
			switchover(ticketGroupList,list,item){
				item.isImage=!item.isImage
				console.log(item);
				this.$set(ticketGroupList,'lists',list)
			},
		}
	}
</script>

<style lang="less" scoped>
	.voucher_list{
		margin-top: 46rpx;
		// background: #FFFFFF;
		// padding:0 30rpx;
		&_item{
			padding: 0 20rpx;
			margin-top: 30rpx;
			box-shadow: 0px 0px 12px 0px rgba(91, 74, 40, 0.1);
			border-radius: 8rpx;
			&_top{
				padding: 24rpx 0;
				display: flex;
				align-items: center;
				&_left{
					width: 188rpx;
					height: 152rpx;
					background: linear-gradient(315deg, #F6E3B8 0%, #DAB279 100%);
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					&_money{
						display: flex;
						align-items: center;
						&_sign{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #735116;
							line-height: 34rpx;
							margin-top: 30rpx;
						}
						&_amount{
							font-size: 60rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #735116;
							line-height: 84rpx;
						}
					}
					&_fullmoney{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #735116;
						line-height: 34rpx;
					}
				}
				&_secondly{
					background: linear-gradient(90deg, #FF9800 0%, #FF4E00 100%);
				}
				&_thirdly{
					background: linear-gradient(90deg, #5BB6FB 0%, #2F80F6 100%);
				}
				&_extra{
					background: #C8C8C8;
				}
				&_right{
					display: flex;
					// justify-content: space-between;
					// align-items: center;
					flex: 1;
					min-height: 152rpx;
					&_information{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						&_effect{
							display: flex;
							align-items: flex-start;
							&_left{
								flex: 1;
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 40rpx;
								margin-right: 8rpx;
							}
							&_right{
								width: 98rpx;
								height: 32rpx;
								background: #FFFFFF;
								border-radius: 4rpx;
								border: 2rpx solid #FF5100;
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FF5100;
								line-height: 28rpx;
								text-align: center;
								box-sizing: border-box;
								margin-top: 4rpx;
							}
							&_used{
								border-color:#C8C8C8;
								color: #C8C8C8;
							}
							&_stale{
								background-color: #C8C8C8;
							}
						}
						&_time{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}
						&_amount{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
						}
						&_used{
							color: #999999;
						}
						&_stale{
							color: #999999;
						}
					}
					&_status{
						display: flex;
						align-items: center;
						&_text{
							width: 124rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 26rpx;
							border: 2rpx solid #242C3B;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #242C3B;
							line-height: 44rpx;
							text-align: center;
							box-sizing: border-box;
						}
						&_secondly{
							border: 2rpx solid #FF5100;
							color: #FF5100;
						}
						&_thirly{
							border: 2rpx solid #2F80F6;
							color: #2F80F6;
						}
					}
					&_boximage{
						width: 136rpx;
						display: flex;
						align-items: center;
						image{
							width: 136rpx;
							height: 114rpx;
							vertical-align: top;
						}
					}
				}
			}
			&_bottom{
				padding: 24rpx 0;
				border-top: 2rpx dashed #E5E5E5;
				display: flex;
				justify-content: space-between;
				&_condition{
					display: flex;
					flex-direction: column;
					width: calc( 100% - 50rpx );
					&_text{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						margin-bottom: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					&_extext{
						overflow:inherit;
						text-overflow: inherit;
						white-space: inherit;
					}
				}
				&_imageview{
					height: 34rpx;
					width: 44rpx;
					margin-right: -10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&_image{
					width: 24rpx;
					height: 14rpx;
					vertical-align: top;
					// margin-top: 10rpx;
					// margin-left: 24rpx;
					transform: rotate(0);
					// transition: 0.3s ease-in-out;
				}
				&_eximage{
					transform: rotate(-180deg);
				}
			}
		}
	}
	.memberlist{
		padding: 40rpx 30rpx 30rpx;
		background: #FFFFFF;
		margin-top: 10rpx;
		.memberlist-title{
			width: 144rpx;
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1F1F1F;
			line-height: 50rpx;
		}
	}
	.memberlist_extra{
		margin-top: 0;
	}
	.memberbuy-title{
		.memberbuy-title-top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.mtt-left{
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
			.mtt-right{
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
			}
		}
		.memberbuy-title-time{
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
		}
	}
	.voucher_center_buycc{
		width: 100%;
		height: 108rpx;
		margin-top: 40rpx;
		background-color: #FFFFFF;
		.voucher_center_btn{
			height: 108rpx;
			background: #332E28;
			border-radius: 59rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFDA9A;
			line-height: 108rpx;
			text-align: center;
		}
	}
</style>
